Las Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS, esta diseñado para cohecionar y definir la informacion dentro de un documento. Esta pensado para marcar la separacion entre los distintos contenidos que puede tener una pagina web y de una forma que sea agradable a la vista dde el usiario
Con esta separacion tambien se busca crear una mejor accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.
Cuando hablamos del modelo de cajas en CSS, estamos haciendo referencia a un sistema que tiene el navegador de interpretar las diferentes partes de lo que solemos denominar «caja»: un elemento HTML con unas ciertas dimensiones. Esta caja esta compuesta por el Margin, Border, Padding y Content, de adentro hacia afuera respectivamente. El margin es la zona que separa la caja de tros elementos, el border es la linea separatoria entre la caja y el exterior, que es parte de la caja, el paddin es el espacio que separa el contenido del borde de la caja y el content es el contenido de la caja.
Responsive es un codigo que podemos utilizar para hacer que nuestra pagina web sea mas agradable a la vista si esta es habierta en otra pantalla que tenga otro tamaño distinto a el de nuestra computadora, como por ejemplo una tablet o un celular, que tienen proporciones completamente distintas a la de la pantalla de nuestra computadora
Es muy importante crear paginas webs que sean adaptables a distintos dispositivos, ya que, por ejemplo, son mas las personas que cadavez usan un celular y si queremos que nuestar pagina tenga notoriedad debemos hacer que esta sea accesible para ese gran numero de personas.
Para usar el responsive debemos poner en CSS "@media scrren" que le indicara a el css lo que queremos hacer. Despues de esto debemos poner el rango en el que queremos que cambie nuestra pagina. Por ejemplo si queremos que nuestra pagina cambie cuando sea habierta en un celular de 412px de hancho debemos poner "(max-width: 412px)", despues debemos colocar el minimo del rango para que cuando habra desde un dispositivoincluso mas pequeño, como por ejemplo 300px. Esto se hace agregando un "and" y poniendo "(min-width: 300px"). Despues de agrgar esto ultimo debemos habrir comillas, " { ", para que la pagina sepa que cambios queremos que realice en las cajas en ese rango de pixeles. Esto se hace colocando "#nombre de caja" abriendo parentesis y poniedo los cambios que queremos como si se tratase de un CSS cualquiera. Despues, obiamente, solo queda cerrar todas la comillas que hemos habierto para terminar con el trabajo.